<template>
  <div class="super-user-info-container">
    <el-form ref="form" :model="superUserInfoForm" label-position="left" label-width="80px" size="mini">
      <h2>个人资料</h2>
      <el-form-item label="昵称">
        <el-input v-model="superUserInfoForm.nickname" maxlength="20" placeholder="填写你的用户名" />
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="superUserInfoForm.office" maxlength="20" placeholder="填写你的职位" />
      </el-form-item>
      <el-form-item label="个人介绍">
        <el-input v-model="superUserInfoForm.introduction" maxlength="200" type="textarea" rows="5" placeholder="填写职业技能、擅长的事情、喜欢的事情等" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSuperUserInfo">保存修改</el-button>
      </el-form-item>
    </el-form>
    <el-upload
      class="avatar-uploader"
      action="www.ckmmd.com"
      :show-file-list="false"
      :http-request="uploadAvatar"
    >
      <img v-if="avatar" :src="$config.staticURL + avatar" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getSuperUserInfo, saveAvatar, saveSuperUserInfo } from '@/api/super_user'
import { uploadPic } from '@/api/upload'
export default {
  name: 'SuperUserInfo',
  components: {},
  props: {},
  data () {
    return {
      superUserInfoForm: {},
      avatar: ''
    }
  },
  computed: { ...mapGetters(['SUPER_USER_INFO']) },
  watch: {},
  created () {
    this.getSuperUserInfo()
  },
  mounted () {},
  methods: {
    getSuperUserInfo: async function () {
      const data = {
        'username': this.SUPER_USER_INFO.username
      }
      const res = await getSuperUserInfo(data)
      if (res) {
        this.superUserInfoForm = res
        this.avatar = res.avatar
      }
    },
    uploadAvatar: async function(obj) {
      const file = obj.file
      if (file.type !== 'image/jpeg') return this.$message.error('上传头像图片只能是 JPG 格式!')
      if (file.size > 1024 * 1024) return this.$message.error('上传头像图片大小不能超过 2MB!')
      const data = new FormData()
      data.append('pic', file)
      const res = await uploadPic(data)
      if (res) {
        this.avatar = res
        this.saveAvatar()
      }
    },
    saveSuperUserInfo: async function () {
      const data = {
        id: this.SUPER_USER_INFO.id,
        nickname: this.superUserInfoForm.nickname,
        office: this.superUserInfoForm.office,
        introduction: this.superUserInfoForm.introduction
      }
      const res = await saveSuperUserInfo(data)
      if (!res) return this.$message({ message: '没有改动!', type: 'error', duration: 1000 })
      this.$message({ message: '已经保存', type: 'success', duration: 1000 })
      this.getSuperUserInfo()
    },
    saveAvatar: async function () {
      const data = {
        id: this.SUPER_USER_INFO.id,
        avatar: this.avatar
      }
      const res = await saveAvatar(data)
      if (res) {
        this.$message({ message: '已经保存', type: 'success', duration: 1000 })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.super-user-info-container {
  padding-left: 20px;
  display: flex;
  ::v-deep .el-form {
    flex: 1;
    h2 {
      margin-bottom: 20px;
      color: var(--main-color);
    }
    .el-form-item__label {
      color: var(--main-color);
    }
  }
  ::v-deep .avatar-uploader {
    flex: 1;
    padding-left: 80px;
    padding-top: 50px;
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #409EFF;
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 78px;
      height: 78px;
      line-height: 78px;
      text-align: center;
    }
    .avatar {
      width: 78px;
      height: 78px;
      display: block;
    }
  }
}
</style>
